<template>
  <div class="projectQuote" v-loading="pageLoading">
    <header class="flex-align-center">
      <span class="blueLine"></span>
      <span style="margin-left: 10px">加工费报价单</span>
    </header>
    <main v-if="dataInfo">
      <!-- <div class="demandIdBox">: {{$route.query.id}}</div> -->
      <div class="infoBox" style="margin-top: 0">
        <el-descriptions title="基本信息" :column="4">
          <el-descriptions-item
            v-for="(item, index) in baseInfo"
            :key="'baseInfo' + index"
            :label="item.name"
          >
            <span v-if="item.key=='shippingRequirement'">
              <em v-if="dataInfo[item.key]=='1'">散货出</em>
              <em v-else-if="dataInfo[item.key]=='2'">栈板出</em>
              <em v-else-if="dataInfo[item.key]=='3'">静电箱出</em>
              <em v-else-if="dataInfo[item.key]=='4'">周转箱出</em>
              <em v-else>无</em>
              <em v-if="dataInfo[item.key]=='4'">周转箱出</em>
            </span>
            <span v-else>{{ dataInfo[item.key] || (item.key == 'value' ? "字段暂无" : "无")}}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="infoBox">
        <el-descriptions title="产品信息" :column="4">
          <el-descriptions-item
            v-for="(item, index) in productInfo"
            :key="'productInfo' + index"
            :label="item.name"
          >
            <span v-if="item.type == 'array'">
              <template v-for="(it, ind) in dataInfo[item.key]">
                <el-tag style="margin-right: 10px" :key="'asdfg' + ind" size="medium">{{ it }}</el-tag>
              </template>
            </span>
            <span v-else-if="item.type == 'object'">
              <template v-for="(its, inds) in Object.keys(dataInfo[item.key])">
                <el-tag
                  style="margin-right: 10px"
                  :key="'asdfg' + inds"
                  size="medium"
                >{{ its }} : {{ dataInfo[item.key][its] ? dataInfo[item.key][its] + ' ‰' : '无'}}</el-tag>
              </template>
            </span>
            <span v-else>{{ dataInfo[item.key] || (item.key == 'value' ? "字段暂无" : "无") }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="infoBox">
        <el-descriptions
          title="加工费报价"
          :column="1"
          size="medium"
          direction="vertical"
          :contentClassName="'contentClass'"
          :colon="false"
        >
          <el-descriptions-item>
            <div style="width: 1400px">
              <div style="width: 100%; height: 40px">
                <el-button
                  style="float: right"
                  type="primary"
                  size="mini"
                  @click="lookCosts()"
                >查看生产成本清单</el-button>
              </div>
              <el-table :data="tableData" :span-method="objectSpanMethod" style="width: 100%">
                <el-table-column align="center" label="工段" width="150">
                  <template slot-scope="scope">
                    <span style="font-weight: 700">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>

                <el-table-column align="center" label="效率">
                  <el-table-column align="center" prop="params1" label="点/件/秒/片">
                    <template slot-scope="scope">
                      <span>{{ scope.row.params1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="params2" label="小时产能"></el-table-column>
                  <el-table-column align="center" prop="params3" label="线体投入"></el-table-column>
                  <el-table-column align="center" prop="params4" label="效率预测"></el-table-column>
                </el-table-column>

                <el-table-column
                  align="center"
                  label="工厂运营成本">
                  <el-table-column
                    align="center"
                    prop="params5"
                    label="小时成本">
                    <template slot-scope="scope">
                      {{ (scope.row.params5 || scope.row.params5 == 0) ? scope.row.params5.toFixed(2) : '-' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="params6"
                    label="工序成本">
                    <template slot-scope="scope">
                      <template v-if="scope.row.name == '垫资费率'">
                        {{ scope.row.params6 || 0 }} % /天
                      </template>
                      <template v-else>
                        {{ (scope.row.params6 || scope.row.params6 == 0) && (scope.row.params6 != '-') ? scope.row.params6.toFixed(2) : '-' }}
                      </template>
                      
                    </template>
                  </el-table-column>
                </el-table-column>

                <el-table-column align="center" label="客户报价">
                  <el-table-column align="center" prop="params7" label="单价"></el-table-column>
                  <el-table-column align="center" prop="params8" label="工序报价"></el-table-column>
                </el-table-column>

                <el-table-column align="center" prop="params9" label="盈亏"></el-table-column>

                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <span class="color-blue finger" @click="openDialog(scope.row.name, scope.row.params10, scope.$index)" v-if="scope.row.params10">查看明细</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="infoBox">
        <el-descriptions title="需求文件清单" :column="1">
          <el-descriptions-item
            v-for="(item, index) in fileData"
            :key="'fileData' + index"
            :label="item.name"
          >
            <template v-if="item.type == 'array'">
              <template v-if="dataInfo[item.key].length">
                <DownLoadFiles v-for="i in dataInfo[item.key]" :key="i + 'jstar'" style="margin-right: 40px" :url="i.url" :title="i.name"></DownLoadFiles>
                </template>
                <span v-else>未上传</span>
              </template>
            <template v-else>
              <DownLoadFiles
                style="margin-right: 40px"
                :url="dataInfo[item.key].url"
                :title="dataInfo[item.key].name"
              ></DownLoadFiles>
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </main>

    <el-dialog v-if="currentDialogView" :title="currentDialogName + '明细'" :visible.sync="currentDialogView" width="70%">
      <div v-if="currentDialogKey != 'purchaseBomFile'"><el-tag style="float: right; margin: 0 0 10px 0">费用：人民币 {{ dataInfo[currentDialogKey].total }} 元</el-tag></div>
      <el-table v-if="currentDialogKey == 'purchaseBomData'" :data="dataInfo[currentDialogKey]" style="width: 100%" border>
        <el-table-column :width="it.width || '120'" v-for="it in dialogTableList[currentDialogKey]" :prop="it.name" :label="it.name" :key="it.name"></el-table-column>
      </el-table>

      <el-table v-else-if="currentDialogKey == 'purchaseBomFile'" :data="dataInfo[currentDialogKey]" style="width:98%;margin:10px 1% 0 0" border>
        <template v-for="item in dialogTableList[currentDialogKey]">
          <el-table-column :prop="item.key" :label="item.name" :key="item.key" :width="item.width || 'auto'">
            <template slot-scope="scope">
              {{ (dataInfo[currentDialogKey][scope.$index][item.key]) }}
            </template>
          </el-table-column>
        </template>
      </el-table>

      <el-table v-else :data="dataInfo[currentDialogKey].rows" style="width: 100%" border>
        <template v-for="item in dialogTableList[currentDialogKey]">
          
          <template v-if="item.precision">
            <el-table-column v-if="!item.type" :prop="item.key" :label="item.name" :key="item.key" :width="item.width || 'auto'">
              <template slot-scope="scope">
                {{ (dataInfo[currentDialogKey].rows[scope.$index][item.key] * 1).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column v-else :label="item.name" :key="item.key" :width="item.width || 'auto'">
              <template slot-scope="scope">
                {{ (dataInfo[currentDialogKey].rows[scope.$index][item.key][item.comKey[0]] * 1 * dataInfo[currentDialogKey].rows[scope.$index][item.key][item.comKey[1]] * 1).toFixed(2) }}
              </template>
            </el-table-column>
          </template>

          <template v-else>
            <el-table-column v-if="!item.type" :prop="item.key" :label="item.name" :key="item.key" :width="item.width || 'auto'">
            </el-table-column>
            <el-table-column v-else :label="item.name" :key="item.key" :width="item.width || 'auto'">
              <template slot-scope="scope">
                {{ dataInfo[currentDialogKey].rows[scope.$index][item.key][item.comKey[0]] * 1 * dataInfo[currentDialogKey].rows[scope.$index][item.key][item.comKey[1]]}}
              </template>
            </el-table-column>
          </template>

        </template>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import FileUpload from '@/components/FileUploadBom'
import FileUpload2 from '@/components/FileUpload2'
import DownLoadFiles from '@/components/DownLoadFiles'
// import request from '@/api/task/index'
export default {
  components: {
    FileUpload,
    DownLoadFiles,
    FileUpload2,
  },
  data() {
    return {
      pageLoading: false,
      loading: false,
      baseInfo: [
        { name: '客户名称', key: 'customer' },
        // {name: "加工模式", key: "value"},
        { name: '报价工厂', key: 'coopFactory' },
        { name: '合作模式', key: 'coopMode' },
        { name: '是否含税', key: 'includeTax' },
        { name: '我司合作主体', key: 'coopCompany' },
        { name: '出货要求', key: 'shippingRequirement' },
        { name: '库存物料是否回购', key: 'materialRepurchase' },
        // { name: '对账周期', key: 'accountingCycle' },
        { name: '账期', key: 'accountingPeriod' },
      ],
      dataInfo: null,
      productInfo: [
        { name: '客户产品编码', key: 'productCode' },
        { name: '产品名称', key: 'productName' },
        { name: '产品类型', key: 'productType' },
        { name: '产品规格', key: 'productSpec' },
        { name: '加工工艺', key: 'process', type: 'array' },
        { name: '损耗率', key: 'wastageRate', type: 'object' },
        { name: 'PCBA拼板后尺寸', key: 'pcbaPanelSize' },
        { name: '可插件PCBA尺寸', key: 'pcbaPluggableSize' },
      ],
      tableData: [],
      fileData: [
        { name: '客户文件', key: 'customerFile', type: 'array' },
        { name: '采购报价单', key: 'purchaseBomFile' },
        { name: '工程BOM文件', key: 'bomFile' },
      ],
      currentDialogView: false,
      currentDialogKey: null,
      currentDialogName: null,
      currentDialogIndex: null,
      dialogTableList: {
        assistMaterialItem: [
          {name: "物料编码", key: "materialNumber"},
          {name: "物料名称", key: "materialName"},
          {name: "规格型号", key: "specification"},
          {name: "单位", key: "capacityUnit", width: "100"},
          {name: "单价", key: "price", width: "100", precision: 2},
          {name: "用量", key: "materialUse", width: "100"},
          {name: "用量单位", key: "capacityUnit"},
          {name: "金额", key: "amount", precision: 2}
        ],
        purchaseBomFile: [
          { name: 'No.', key: 'No.', width: "100"},
          { name: '物料分类（二级）', key: '物料分类（二级）', width: "100"},
          { name: '物料编码', key: '物料编码', width: "100"},
          { name: '物料名称', key: '物料名称', width: "100"},
          { name: '规格型号', key: '规格型号', width: "100"},
          { name: '(子项明细)子项类型', key: '(子项明细)子项类型', width: "100"},
          { name: '单位', key: '单位', width: "100"},
          { name: '用量', key: '用量', width: "100"},
          { name: '币种', key: '币种', width: "100"},
          { name: '税点', key: '税点', width: "100"},
          { name: '未税单价', key: '未税单价', width: "100"},
          { name: '未税金额', key: '未税金额', width: "100"},
          { name: '含税单价', key: '含税单价', width: "100"},
          { name: '含税金额', key: '含税金额', width: "100"},
          { name: '对内未税报价', key: '对内未税报价', width: "100"},
          { name: '对内未税金额', key: '对内未税金额', width: "100"},
          { name: 'MOQ', key: 'MOQ', width: "100"},
          { name: 'L/T', key: 'L/T', width: "100"},
          { name: '账期', key: '账期', width: "100"},
          { name: '品牌', key: '品牌', width: "100"},
          { name: '指定供应商', key: '指定供应商', width: "100"},
          { name: '采购', key: '采购', width: "100"}
        ],
        toolMaterialItem: [
          { name: '类别', key: 'category' },
          { name: '物料编码', key: 'materialNumber' },
          { name: '名称', key: 'materialName' },
          { name: '单价', key: 'price' , precision: 2},
          { name: '数量', key: 'qty' },
          { name: '总价', key: 'amount', precision: 2},
          { name: '说明', key: 'remark' },
        ],
        machineItem: [
          { name: '工段', key: 'projectName' },
          { name: "小时单价", key: "variableAmount" , precision: 2},
          { name: '参与人数', key: 'inputArgument.employeeInput' },
          { name: '每人耗时 (小时)', key: 'inputArgument.employeeTimeCost' },
          {
            name: '总耗时',
            key: 'inputArgument',
            type: 'computed',
            comKey: ['employeeInput', 'employeeTimeCost'],
          },
          { name: "总价", key: "amount", precision: 2 }
        ],
      },
      purchaseBomData: '',
      processItemUnit: [],
      processMap: {
        CI1: 'SMT',
        CI2: 'DIP',
        CI3: 'TEST',
        CI4: 'PACK',
      }
    }
  },
  async created() {},
  async mounted() {
    await this.getBaseQuotation()
    // await this.queryCustomerQuoteInfo()
  },
  methods: {
    /* 获取客户报价信息 */
    queryCustomerQuoteInfo () {
      return new Promise(resolve => {
        this.$quote.queryCustomerInfo(this.dataInfo.customerId)
        .then(res => {
          if (res.code == 200) {
            if (!res.data.length) {
              this.$alert(this.dataInfo.customer + '-客户暂未报价，请先前往客户报价页面报价！', '提示', {
                confirmButtonText: '确定',
                callback: () => {
                  this.$router.push({ path: '/business/customerQuote' })
                }
              })
              resolve()
            } else {
              res.data.forEach(item => {
                this.processItemUnit.push(item.quoteMethod.replace('按', '').replace('算', ''))
              })
            }
          } else {
            this.$message.error(res.code + '-' + res.msg)
          }
          resolve()
        })
        .catch(e => {
          this.$message.error(e.toString())
        })
      })
    },
    addFloatNum(num1, num2) {
      var sq1, sq2, m
      try {
        sq1 = num1.toString().split('.')[1].length
      } catch (e) {
        sq1 = 0
      }
      try {
        sq2 = num2.toString().split('.')[1].length
      } catch (e) {
        sq2 = 0
      }
      m = Math.pow(10, Math.max(sq1, sq2))
      return (num1 * m + num2 * m) / m
    },
    /* 获取工程报价基本信息 */
    getBaseQuotation() {
      this.pageLoading = true
      return new Promise((resolve) => {
        this.$params
          .costQuoteDetail(this.$route.query.id)
          .then((res) => {
            this.pageLoading = false
            if (res.code == 200) {
              let temp = []
              res.data.toolMaterialItem.rows.forEach((item) => {
                // if (item.amount) {
                  temp.push(item)
                // }
              })
              res.data.toolMaterialItem.rows = temp

              let temp2 = []
              res.data.process.forEach(it => {
                temp2.push(this.processMap[it])
              })
              res.data.process = temp2

              let newMachineItem = []
              res.data.machineItem.rows.forEach(it => {
                if (JSON.stringify(it.inputArgument) === '{}') return
                newMachineItem.push(it)
              })
              res.data.machineItem.rows = newMachineItem
              this.dataInfo = res.data
              this.createdTableData(res.data)
            } else {
              this.$message.error(res.code + '-' + res.msg)
            }
            resolve()
          })
          .catch((err) => {
            this.$message.error(JSON.stringify(err))
          })
      })
    },
    /* 解析表格数据 */
    createdTableData(data) {
      /* 效率清单 */
      this.setProcessItem(data.processItem)
      /* 辅料 */
      this.setAssistMaterialItem(data.assistMaterialItem)
      /* 物料 */
      this.setMaterialItem(data.materialItem)
      /* 物流费 */
      this.setLogisticsCost()
      /* 合计 */
      this.setTotla1()
      /* 工治具 */
      this.setToolMaterialItem(data.toolMaterialItem)
      /* 开机费 */
      this.setMachineItem(data.machineItem)
      /* 资金费 */
      this.setCapitalFee()
      /* 合计二 */
      // this.setTotla2()
    },
    /*  */
    /* 效率清单 */
    setProcessItem(data) {
      console.log(data)
      data.rows.forEach((item, index) => {
        let temp = {}
        temp.name = item.projectName
        if (item.inputArgument.efficiency) {
          temp.params1 = item.inputArgument.efficiency + ' ' + ((item.inputArgument.unit === "小时" || item.inputArgument.unit === "片") ? "秒" : item.inputArgument.unit)
          temp.params2 = item.inputArgument.hourOutput
          temp.params3 = item.inputArgument.employeeInput
          temp.params4 = item.inputArgument.predictEfficiency + '%'
        } else {
          temp.params1 = '-'
          temp.params2 = '-'
          temp.params3 = '-'
          temp.params4 = '-'
        }
        
        temp.params5 = (item.variableAmount * 1 )
        temp.params6 = item.amount
        temp.params7 = item.custQuotePrice + (item.inputArgument.unit ? ' / ' + item.inputArgument.unit : '' )
        temp.params8 = item.custQuoteAmount
        temp.params9 = item.profit

        this.tableData.push(temp)
      })
    },
    /* 辅料 */
    setAssistMaterialItem(data) {
      let temp = {}
      temp.name = '辅料'
      temp.params1 = ''
      temp.params6 = data.total
      data.rows.forEach(item => {
        temp.params1 += `${item.materialName} `
        // temp.params6 += item.amount
      })
      temp.params7 = '-'
      temp.params8 = '-'
      temp.params9 = '-'
      temp.params10 = 'assistMaterialItem'
      this.tableData.push(temp)
    },
    /* 物料 */
    setMaterialItem(data) {
      let temp = {}
      temp.name = '物料'
      temp.params1 = '代采部分'
      temp.params6 = data.total
      temp.params7 = '-'
      temp.params8 = '-'
      temp.params9 = '-'
      temp.params10 = 'purchaseBomFile'
      this.tableData.push(temp)
    },
    /* 物流费 */
    setLogisticsCost() {
      let temp = {}
      temp.name = '物流费'
      temp.params1 = '按片数'
      temp.params6 = (this.dataInfo.logisticsCost * 1)
      temp.params7 = '-'
      temp.params8 = '-'
      temp.params9 = '-'
      this.tableData.push(temp)
    },
    setTotla1() {
      let temp = {}
      temp.name = '合计'
      temp.params6 = 0
      this.tableData.forEach(item => {
        temp.params6 += item.params6 || 0
      })
      temp.params6 = temp.params6
      temp.params7 = '-'
      temp.params8 = '-'
      temp.params9 = '-'
      this.tableData.push(temp)
      this.tableData.push({ name: '-' })
    },
    /* 工治具 */
    setToolMaterialItem(data) {
      let temp = {}
      temp.name = '工治具'
      temp.params1 = ''
      temp.params6 = data.total
      data.rows.forEach(item => {
        if (item.amount) {
          temp.params1 += `${item.materialName} `
          // temp.params6 += item.price * 1 * item.qty * 1
        }
      })
      // temp.params6 = '-'
      temp.params7 = '-'
      temp.params8 = '-'
      temp.params9 = '-'
      temp.params10 = 'toolMaterialItem'
      this.tableData.push(temp)
    },
    /* 开机费 */
    setMachineItem(data) {
      let temp = {}
      temp.name = '开机费'
      temp.params1 = ''
      temp.params6 = data.total
      data.rows.forEach(item => {
        temp.params1 += `${item.projectName} `
        // temp.params6 += item.inputArgument.employeeInput * 1 * item.inputArgument.employeeTimeCost * 1
      })
      
      temp.params7 = '-'
      temp.params8 = '-'
      temp.params9 = '-'
      temp.params10 = 'machineItem'
      this.tableData.push(temp)
    },
    /* 资金费 */
    setCapitalFee() {
      let temp = {}
      temp.name = '垫资费率'
      temp.params1 = ''
      temp.params6 = (this.dataInfo.advanceRate * 1)
      temp.params7 = '-'
      temp.params8 = '-'
      temp.params9 = '-'
      this.tableData.push(temp)
    },
    setTotla2() {
      let temp = {}
      temp.name = '合计'
      temp.params6 = 0
      this.tableData.forEach((item, index) => {
        if (index > 8) {
          temp.params6 += item.params6 || 0
        }
      })
      temp.params6 = temp.params6
      temp.params7 = '-'
      temp.params8 = '-'
      temp.params9 = '-'
      this.tableData.push(temp)
    },
    /* 合并表格 */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex > 3 && rowIndex < 7) {
        if (columnIndex == 1) {
          return {
            rowspan: 1,
            colspan: 4,
          }
        }
        if (columnIndex > 1 && columnIndex < 5) {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }

      if (rowIndex == 7) {
        if (columnIndex == 0) {
          return {
            rowspan: 1,
            colspan: 5,
          }
        }
        if (columnIndex > 0 && columnIndex < 5) {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }

      if (rowIndex == 8) {
        if (columnIndex == 0) {
          return {
            rowspan: 1,
            colspan: 11,
          }
        }
        if (columnIndex > 0 && columnIndex < 11) {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }

      if (rowIndex > 8 && rowIndex < 12) {
        if (columnIndex == 1) {
          return {
            rowspan: 1,
            colspan: 4,
          }
        }
        if (columnIndex > 1 && columnIndex < 5) {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }

      if (rowIndex == 12) {
        if (columnIndex == 0) {
          return {
            rowspan: 1,
            colspan: 5,
          }
        }
        if (columnIndex > 0 && columnIndex < 5) {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
    },
    openDialog(name, key) {
      this.currentDialogName = name
      this.currentDialogKey = key
      // if (key == 'materialItem') {
      //   this.$quote
      //     .getUpcomingTaskById(this.$route.query.id)
      //     .then((res) => {
      //       if (res.code == 200) {
      //         this.purchaseBomData = res.data.data.purchaseBomData
      //       } else {
      //         this.$message.error(res.code + '-' + res.msg)
      //       }
      //     })
      //     .catch((err) => {
      //       this.$message.error(JSON.stringify(err))
      //     })

      // }
      this.currentDialogView = true
    },

    lookCosts() {
      this.$router.push({
        path: './billOfCosts',
        query: { id: this.$route.query.id },
      })
    },
  },
}
</script>

<style lang="less">
.projectQuote {
  width: 100%;
  height: calc(100vh - 84px);
  box-sizing: border-box;
  padding: 16px;
  background-color: #f3f5fa;
  overflow: auto;
  header {
    height: 50px;
    background-color: white;
    color: #666666;
    .blueLine {
      margin-left: 5px;
      height: 20px;
      width: 5px;
      background-color: #246cff;
    }
  }
  main {
    margin-top: 20px;
    height: calc(100% - 70px);
    overflow: auto;
    .el-descriptions--medium:not(.is-bordered) th,
    .el-descriptions--medium:not(.is-bordered) td {
      padding-bottom: 20px;
    }
    .el-table {
      .el-table__header-wrapper {
        th {
          padding-bottom: 10px;
          // background-color: #1890ff;
          // color: white;
        }
      }
      .el-table__row {
        td {
          padding-bottom: 10px;
        }
      }
    }
    .demandIdBox {
      height: 36px;
      line-height: 36px;
      text-indent: 20px;
      background-color: white;
      color: #666666;
    }
    .infoBox {
      box-sizing: border-box;
      padding: 16px 20px;
      margin-top: 20px;
      background-color: white;
    }
    .el-descriptions-item__label {
      color: rgb(151, 151, 151);
      align-items: center;
    }
    .donwLoadBox {
      a {
        color: #3377ff;
      }
    }
  }
  .contentClass {
    box-sizing: border-box;
    padding: 0 16px;
  }
  .bottomBtnBox {
    height: 66px;
    border-top: 1px solid rgb(240, 240, 240);
    .el-button {
      margin: 10px 20px 0;
    }
  }
  .totalPriceBox {
    width: 1200px;
    height: 50px;
    justify-content: end;
  }
  .fixtureLeft {
    width: 15%;
    div {
      height: 45px;
      border: 1px solid #dfe6ec;
      border-top: none;
      text-align: center;
      line-height: 45px;
      margin-right: 20px;
      box-sizing: border-box;
    }
    & > div:nth-child(1) {
      border-top: 1px solid #dfe6ec;
      background-color: #46a6ff;
      border-color: #46a6ff;
      color: #fff;
    }
  }
  .labelWidth {
    min-width: 200px;
    text-align: end;
  }
}
</style>